<template>
  <el-dialog
    :title="'店铺信息'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>店铺基本信息</span>
      </div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="16px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="店铺名:" prop="name" label-width="150px">
                <span>{{this.shopCompany.shopName}}</span>
              </el-form-item>
          </div></el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="主营类目:" prop="goodsTypeName" label-width="150px">
                <span>{{this.shopCompany.goodsTypeName}}</span>
              </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
          <el-form-item label="法人:" prop="corporation" label-width="150px">
            <span>{{this.shopCompany.corporation}}</span>
          </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-form-item label="经营者:" prop="operatorName" label-width="150px">
            <span>{{this.shopCompany.operatorName}}</span>
          </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
        <el-form-item label="店铺LOGO:" prop="shopLogoUrl" label-width="150px">
          <template>
            <img v-if="this.shopCompany.shopLogoUrl" class="avatar"
            :src="loadImage(this.shopCompany.shopLogoUrl)" width="50" height="50" />
          </template>
        </el-form-item>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
        <el-form-item label="员工人数:" prop="empNum" label-width="150px">
          <span>{{this.shopCompany.empNum}}</span>
        </el-form-item>
        </div></el-col>
         </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
          <el-form-item label="联系QQ:" prop="operatorName" label-width="150px">
            <span>{{this.shopCompany.contactQq}}</span>
          </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-form-item label="联系电话:" prop="mobile" label-width="150px">
            <span>{{this.shopCompany.mobile}}</span>
          </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
          <el-form-item label="创建时间:" prop="createTime" label-width="150px">
            <span>{{this.shopCompany.createTime}}</span>
          </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-form-item label="店铺管理员:" prop="username" label-width="150px">
            <span>{{this.shopCompany.username}}</span>
          </el-form-item>
          </div></el-col>
        </el-row>


        <el-form-item label="店铺描述:" prop="shopRemark" label-width="150px">
          <span>{{this.shopCompany.shopRemark}}</span>
        </el-form-item>
        <el-form-item label="店铺地址:" prop="shopRemark" label-width="150px">
          <span>
          {{this.shopCompany.province}}
          {{this.shopCompany.city}}
          {{this.shopCompany.area}}
          {{this.shopCompany.street}}
          </span>
        </el-form-item>
        <el-form-item label="营业执照号:" prop="busiCode" label-width="150px">
          <span>{{this.shopCompany.busiCode}}</span>
        </el-form-item>
        <el-form-item label="营业执照电子版:" prop="busiCodeFile" label-width="150px">
            <template>
            <img v-if="this.shopCompany.busiCodeFile" class="avatar"
              :src="loadImage(this.shopCompany.busiCodeFile)" width="150" height="150" />
            </template>
        </el-form-item>
        <el-form-item label="法定经营范围:" prop="busiScope" label-width="150px">
          <span>{{this.shopCompany.busiScope}}</span>
        </el-form-item>
        <el-form-item label="组织机构代码:" prop="orgCode" label-width="150px">
          <span>{{this.shopCompany.orgCode}}</span>
        </el-form-item>
        <el-form-item label="组织机构代码电子版:" prop="orgCodeFile" label-width="150px">
            <template>
            <img v-if="this.shopCompany.orgCodeFile" class="avatar"
              :src="loadImage(this.shopCompany.orgCodeFile)" width="150" height="150" />
            </template>
        </el-form-item>
        <el-form-item label="经营类许可证书:" label-width="150px">
            <template>
            <img v-for="(item,index) in this.shopCompany.busiAllowFiles" class="avatar"
              :src="item.certUrl" width="150" height="150" :key="index"/>
            </template>
        </el-form-item>
        <el-form-item label="产品类证书:" label-width="150px">
            <template>
            <img v-for="(item,index) in this.shopCompany.prodCertFiles" class="avatar"
              :src="item.certUrl" width="150" height="150" :key="index"/>
            </template>
        </el-form-item>
        <el-form-item label="其它证书:" label-width="150px">
            <template>
            <img v-for="(item,index) in this.shopCompany.otherCertFiles" class="avatar"
              :src="item.certUrl" width="150" height="150" :key="index"/>
            </template>
        </el-form-item>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="店铺状态:" prop="state" label-width="150px">
              <template>
                <el-select v-model="dataForm.state" placeholder="店铺状态" @change="handlerSetState">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="认证状态:" prop="isAuth" label-width="150px">
              <span>{{this.getIsAuthValue(this.shopCompany.isAuth)}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item label="审批意见:" prop="checkComment" label-width="150px" v-show="this.dataForm.state===-10">
          <el-input type="textarea" v-model="dataForm.checkComment"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="submitVisible" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        submitVisible: false,
        shopCompany: [],
        options1: [{value: 0, label: '待审核'},
                   {value: 10, label: '正常'},
                   {value: -10, label: '关闭或审核失败'},
                   {value: -50, label: '用户关闭店铺'}],
        options2: [{value: 0, label: '未认证'},
                   {value: 10, label: '认证中'},
                   {value: 20, label: '已认证'},
                   {value: -10, label: '认证不通过'}],
        isAuthValue: '',
        dataForm: {
          cid: '',
          state: '',
          checkComment: ''
        },
        dataRule: {}
      }
    },
    methods: {
      init (cid) {
        this.visible = true
        this.submitVisible = false
        this.dataForm.checkComment = ''
        // console.log(cid)
        this.$http({
          url: this.$http.adornUrl(`/pig-center-biz/shop/manage/info`),
          method: 'post',
          params: this.$http.adornParams({
            'cid': cid
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.shopCompany = data.shopCompany
            this.dataForm.cid = data.shopCompany.cid
            this.dataForm.state = data.shopCompany.state
          }
        })
      },
      loadImage (path) {
        return this.$http.adornUrl(`/pig-file/center/file/openImg?url=` + path)
      },
      getIsAuthValue (isAuth) {
        for (let i = 0; i < this.options2.length; i++) {
          if (this.options2[i].value === isAuth) {
            return this.options2[i].label
          }
        }
      },
      handlerSetState (value) {
        this.dataForm.state = value
      },
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.submitVisible = true
            this.$http({
              url: this.$http.adornUrl(`/pig-center-biz/shop/manage/setState`),
              method: 'post',
              params: this.$http.adornParams({
                'cid': this.dataForm.cid,
                'state': this.dataForm.state,
                'checkComment': this.dataForm.checkComment
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style>

  .box-card {
    width: 96%;
    box-shadow: #409EFF;
    border-radius: 16px;
    margin: auto;
  }

</style>
